import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: root
    width: 280
    height: 400
    color: "#ffffff"
    radius: 10
    border.color: "#e0e0e0"
    border.width: 1

    property int hours: hoursTumbler.currentIndex
    property int minutes: minutesTumbler.currentIndex

    ColumnLayout {
        anchors.fill: parent
        spacing: 10

        Text {
            Layout.alignment: Qt.AlignHCenter
            text: "选择时间"
            font.pixelSize: 20
            color: "#333333"
            Layout.topMargin: 20
        }

        Rectangle {
            Layout.alignment: Qt.AlignHCenter
            Layout.preferredWidth: parent.width - 40
            Layout.preferredHeight: 200
            color: "transparent"

            Row {
                anchors.centerIn: parent
                spacing: 10

                Tumbler {
                    id: hoursTumbler
                    model: 24
                    height: 200
                    width: 80
                    
                    delegate: Text {
                        text: modelData.toString().padStart(2, '0')
                        color: Tumbler.tumbler.currentIndex === index ? "#1976D2" : "#666666"
                        font.pixelSize: Tumbler.tumbler.currentIndex === index ? 22 : 18
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
                    }
                }

                Text {
                    text: ":"
                    font.pixelSize: 24
                    anchors.verticalCenter: parent.verticalCenter
                    color: "#333333"
                }

                Tumbler {
                    id: minutesTumbler
                    model: 60
                    height: 200
                    width: 80

                    delegate: Text {
                        text: modelData.toString().padStart(2, '0')
                        color: Tumbler.tumbler.currentIndex === index ? "#1976D2" : "#666666"
                        font.pixelSize: Tumbler.tumbler.currentIndex === index ? 22 : 18
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
                    }
                }
            }
        }

        Text {
            Layout.alignment: Qt.AlignHCenter
            text: hours.toString().padStart(2, '0') + ":" + minutes.toString().padStart(2, '0')
            font.pixelSize: 24
            color: "#1976D2"
        }
    }
} 